<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.list-body li:nth-child(even) {
				background: yellow;
			}
			.list-body li:nth-child(odd) {
				background: #fff;
			}
			.list-body li:hover {
				background: green;
			}
			.list-body li.checkedColor {
				background: green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/baidu.css" />
		<script src="../src/vue.js"></script>
	</head>

	<body>
		<div class="wrap" id="app">
			<div class="baidu">
				<ul class="list list-head">
					<li>
						<div>
							<input type="checkbox" v-model="isCheckedAll" />全选
						</div>
						<span>歌单</span>
						<span>歌手</span>
						<span>专辑</span>
					</li>
				</ul>
				<ul class="list list-body">
					<!--class="checkedColor"-->
					<li 
						v-for="item in list" 
						:class="{checkedColor: item.checked}"
					>
						<div>
							<input v-model="item.checked" type="checkbox">
						</div>
						<span>{{item.song}}</span>
						<span>{{item.name}}</span>
						<span>{{item.album}}</span>
					</li>
				</ul>
				<div class="select">
					<span class="selectAll">

						<span>统计：</span>
					</span>
					<div class="others">
						<span><em></em>歌手有：3位</span>
						<span><em></em>专辑有5张</span>
					</div>
				</div>
			</div>
		</div>
		<script>
			let data = [
				{
					id:Date.now()+Math.random(),
					name: '邓紫棋',
					song: '泡沫',
					checked: true,
					album: 10
				},
				{
					id:Date.now()+Math.random(),
					name: '王杰',
					song: '泡沫',
					checked: true,
					album: 10
				},
				{
					id:Date.now()+Math.random(),
					name: '周杰伦',
					song: '菊花台',
					checked: false,
					album: 10
				}
			];

			let vm = new Vue({
				el: '#app',
				data: {
					list: data
				},
				computed: {
					isCheckedAll () {
						return this.list.filter(item => item.checked).length === this.list.length;
					}
				}
			});

			let o = {a:1,b:2};

			// 数据劫持 转成getter和setter

			let obj = {
				get miaov () {
					console.log('找值');
					return 'ketang'
				},
				set miaov (newValue) {
					console.log('设置值');
					console.log(newValue);
				}
			}

			console.log(obj.miaov);
			obj.miaov = '新值'

		</script>
	</body>

</html>
